<template>
	<view>
		<u-navbar :is-back="false" :height="height" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<view class="nav-bar">
					<u-icon class="back" size="20px" :color="color" @click="$p.back()" name="arrow-left"></u-icon>
					<text :style="{ color: color ,fontSize:size}">{{ title }}</text>
					<view v-if="righttext" :style="{ color: color}" @click="$p.navto(path)" class="posaright">{{righttext}}</view>
				</view>
			</view>
		</u-navbar>
	</view>
</template>

<script>
export default {
	name: "Header",
	props: {
		color: {
			type: String,
			default: '#131314'
		},
		iconColor: {
			type: String,
			default: '#131314'
		},
		title: {
			type: String,
			default: '',
		},
		righttext: {
			type: String,
			default: '',
		},
		path: {
			type: String,
			default: '',
		},
		height: {
			type: String,
			default: '60',
		},

		bg: {
			type: String,
			default: 'transparent'
		},
		color: {
			type: String,
			default: '#131314'
		},
		headertype: {
			type: [Number, String],
			default: 1
		},
		size:{
			type: String,
			default: '16px'
		}
	},
	data() {
		return {
			background: {
				background: 'transparent',
				backgroundSize:'100% auto'
			},
		};
	},
	created() {
		if (this.headertype == 1) {
			this.background.background = 'transparent'
		} else if(this.headertype == 2) {
			this.background.background = 'linear-gradient(90deg, #E5FCFA 0%, #FAE1F4 100%)'
		} else if(this.headertype == 3) {
		}else if(this.headertype == 4) {
			this.background.background = "#000"
		}
	},
}
</script>

<style lang="less">
	.posaright {
		position: absolute;
		right: 15px;
		font-size: 13px;
	}
</style>